<template>
  <div class="shop-header">
    <!-- 店铺封面图 -->
    <div class="shop-cover" :style="{ backgroundImage: `url(${shopInfo.coverImage})` }"></div>

    <!-- 店铺基本信息 -->
    <div class="shop-info">
      <h1>{{ shopInfo.name }}</h1>

      <!-- 评分和月售 -->
      <div class="shop-meta">
        <span class="rating">
          <el-rate v-model="shopInfo.rating" disabled show-score />
          <span>{{ shopInfo.rating.toFixed(1) }}</span>
        </span>
        <span>月售 {{ shopInfo.monthlySales }} 单</span>
      </div>

      <!-- 配送信息 -->
      <div class="delivery-info">
        <span>起送 ¥{{ shopInfo.minOrder }}</span>
        <span>配送费 ¥{{ shopInfo.deliveryFee }}</span>
        <span>平均 {{ shopInfo.deliveryTime }} 分钟</span>
      </div>

      <!-- 公告/描述 -->
      <div class="shop-notice">
        <h3>店铺公告</h3>
        <p>{{ shopInfo.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopInfo: {
      type: Object,
      required: true,
      default: () => ({
        name: '店铺名称',
        coverImage: require('@/assets/shop-cover.jpg'),
        rating: 4.5,
        monthlySales: 100,
        minOrder: 20,
        deliveryFee: 5,
        deliveryTime: 30,
        description: '这里是店铺的详细描述...'
      })
    }
  }
}
</script>

<style scoped>
.shop-header {
  margin-bottom: 20px;
}

.shop-cover {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.shop-info {
  padding: 15px;
}

.shop-meta, .delivery-info {
  display: flex;
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.shop-meta > span,
.delivery-info > span {
  margin-right: 15px;
}

.shop-notice {
  padding: 10px;
  background: #fff8e8;
  border-radius: 4px;
  margin-top: 15px;
}

.shop-notice h3 {
  margin-bottom: 5px;
  font-size: 14px;
  color: #ff9900;
}
</style>
